<template>
  <view
    class="artworks-item"
    @click="handleArtworks(artworksInfo)">
      <u-image
        width="160rpx"
        height="160rpx"
        :lazy-load="true"
        :fade="false"
        :border-radius="10"
        :src="artworksInfo.wx_cover_url || artworksInfo.cover_url"
        :show-menu-by-longpress="false"
        mode="aspectFit"
        class="image">
        <u-loading slot="loading" color="#56d39d" size="36"></u-loading>
      </u-image>
      <!-- 状态显示 -->
      <view v-if="artworksInfo.audit_status !== 'success'" class="show-status-container">
        <text v-if="artworksInfo.audit_status === 'review'">审核中</text>
        <text v-else-if="artworksInfo.audit_status === 'reject'">已拒绝</text>
      </view>
      <!-- 状态显示 -->
  </view>
</template>

<script>
import loginWrap from '../loginWrap/loginWrap.vue';
export default {
  components: { loginWrap },
  props: {
    artworksInfo: {
      type: Object,
      default: () => {
        return {
          audit_status: "success",
          cover_url: "https://qiniu-res.jintianwang.cc/20221022183204-2022-10-22-14-0.jpg",
          hot_num: 0,
          id: 187,
          like_num: 0,
          type: 2,
          wx_cover_url: "",
        }
      }
    }
  },
  data() {
    return {
      name: '列表'
    }
  },
  methods: {
    handleArtworks() {
      if (this.artworksInfo.audit_status === 'success') {
        this.$emit('handleArtworks', this.artworksInfo);
      }
    }
  }
}
</script>

<style lang="scss">
  .artworks-item{
    width: 100%;
    margin-bottom: 24rpx;
    position: relative;
    border-radius: 8rpx;
    overflow: hidden;
    padding: 6rpx;

    .show-status-container{
      background: #000;
      color: #fff;
      width: 100%;
      height: 100%;
      z-index: 999;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
    }
  }
</style>
